<!-- 老虎机 -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" :title="'【老虎机】' + data.game_name" :close-on-click-modal="false"
    :close-on-press-escape="false" top="12vh" width="60%" @close="onHideDetails">
    <div class="dialogMaxHeight padding20">
      <el-form :class="props.showDisable ? 'disableUser' : ''" ref="ruleFormRef" :model="data" :inline="true"
        :rules="rules" :scroll-to-error="true">
        <form-item title="游戏名称" :pass="true" value="game_name">
          <el-input class="width240" type="text" v-model="data.game_name" clearable disabled />
          <span class="tipsText"> (游戏名称的描述说明)</span>
        </form-item>
        <form-item title="RTP设定" :pass="true" value="a_slots_rtp">
          <el-select v-model="data.a_slots_rtp" placeholder="请选择RTP" filterable>
            <el-option v-show="item" v-for="item in data.rtpList" :label="item + '%'" :value="item" />
          </el-select>
          <span class="tipsTextRed"> (选择玩家在游戏中的回报率)</span>
        </form-item>
        <!-- JILI游戏才显示 -->
        <form-item title="RTP类型" value="a_slots_rtptype" v-show="props.checkedItem.platform == '3' ? true : false">
          <el-select v-model="data.a_slots_rtptype" placeholder="请选择RTP类型" filterable>
            <el-option v-show="item" v-for="item in RtpType" :label="item.label" :value="item.value" />
          </el-select>
          <span class="tipsText"> (选择玩家在游戏中的回报率的类型)</span>
        </form-item>
        <form-item title="止损止赢开关" value="a_slots_auto">
          <el-radio-group v-model="data.a_slots_auto" size="large">
            <el-radio-button label="开启" :value="0" />
            <el-radio-button label="关闭" :value="1" />
          </el-radio-group>
          <span class="tipsText marginT2">(slot的AUTO附加功能，开启后，玩家在游戏内自动旋转时，可以设定条件，达到输赢条件停止自动旋转)</span>
        </form-item>
        <form-item title="游戏wild元素ID" :pass="true" value="a_slots_wildid" v-if="!indexStore.is_general_agent">
          <el-input-number :min="0" :max="999999999999999" :precision="0" v-model="data.a_slots_wildid"
            placeholder="请输入游戏wild元素ID" clearable controls-position="right" />
          <span class="tipsText">(游戏端的游戏wild元素ID)</span>
        </form-item>
        <form-item title="小游戏图标" :pass="true" value="a_slots_scatterid" v-if="!indexStore.is_general_agent">
          <el-input-number :min="0" :max="999999999999999" :precision="0" v-model="data.a_slots_scatterid"
            placeholder="小游戏图标" clearable controls-position="right" />
          <span class="tipsText ">(游戏中小游戏图标)</span>
        </form-item>
        <form-item title="赢取最高押注倍数" :pass="true" value="a_slots_maxwin">
          <el-input-number :min="1" :max="selectToLabel(MaximumMultiple, data.game_id)" :precision="0"
            v-model="data.a_slots_maxwin" placeholder="请输入赢取最高押注倍数" clearable controls-position="right" />
          <span class="tipsText">*(玩家在游戏内每局赢奖倍数限制,此倍数与总押注相乘为每局最高可赢取额度;默认值为200倍;可设置范围 <span class="tipsTextRed"> 1 ~ {{
            selectToLabel(MaximumMultiple, data.game_id) }}</span> ;设置倍数越小，玩家返奖越低)</span>
        </form-item>
        <form-item title="购买小游戏功能" class="flex" :pass="true" value="a_slots_buy" v-if="data.a_slots_buy != -1">
          <el-radio-group v-model="data.a_slots_buy" size="large">
            <el-radio-button label="开启" :value="1" />
            <el-radio-button label="关闭" :value="0" />
          </el-radio-group>
          <span class="tipsText ">(是否开启购买小游戏功能)</span>
        </form-item>
      </el-form>
      <form-item title="投注金额" value="a_slots_amount" :subtract="data.isMaintenance ? false : true && !props.showDisable" @addItem="addPressure">
        <p v-if="!props.showDefault && data.isMaintenance" class="tipsTextRed">*(游戏在维护状态下才能编辑)</p>
        <span class="tipsText ">(游戏的单押投注额度展示；游戏的总押注=单押额*押注等级（1~10）*游戏线数)</span>
        <div class="flex amountBox">
          <div class="margin5 box-item" v-for="(item, index) in data.pressureList" :key="index"
            style="flex-basis:100%;">
            <div class="flex">
              <el-input-number class="width200" :disabled="data.isMaintenance" :min="0.001" :max="99999999999999999999"
              :precision="3" v-model="item.num" placeholder="请输入基础面额" clearable controls-position="right" />
              <div v-show="data.isMaintenance ? false : true && !props.showDisable" class="reduce-btn reduce-btn_new marginL5" @click="reducePressure(index)">-</div>
            </div>
            <div>
              <div v-for="(second, index) in data.otherLevel" :key="index">
                {{ item.num }} x 押注等级{{ second }} x 线数{{ data.otherLine }} =
                总押注 <span class="mustPass">{{
                  BigTimes(second, BigTimes(item.num, data.otherLine)) }}</span>
              </div>
            </div>
          </div>
        </div>
      </form-item>
    </div>
    <template #footer v-show="!props.showDisable">
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails">取 消</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watch, computed, unref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getOperatorTiger, editTiger, getGameStatus } from '@/api/game'
import { throttle, selectToLabel } from '@/utils/index'
import { BigTimes } from '@/utils/math'
import { MaximumMultiple, RtpType } from '@/config/eunm'
import FormItem from '@/components/FormItem/FormItem.vue'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  showDefault: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  showDisable: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      chooseOperator(props.checkedItem.agent_id, props.checkedItem.game_id)
    }
  },
)

// 游戏在维护状态下才能编辑
const getGameInfo = async (row: any) => {
  let res = await getGameStatus({
    agent_id: row.agent_id,
    game_id: row.game_id
  })
  if (res.data.status) {
    data.isMaintenance = true
  } else {
    data.isMaintenance = false
  }

}

const data = reactive({
  id: 0,
  game_id: 0,
  game_name: '',
  a_slots_rtp: 0,
  a_slots_rtptype: 0,
  a_slots_auto: 0,
  a_slots_buy: 0,
  a_slots_wildid: 0,
  a_slots_scatterid: 0,
  a_slots_multipleclose: 0,
  a_slots_buymultiple: 0,
  a_slots_maxwin: 0,
  trial_path: '',
  pressureList: [{ num: 0.001 }],
  otherLevel: [] as number[],
  otherLine: 0,
  rtpList: [],
  isMaintenance: false,
})

// 选择运营商
const chooseOperator = async (id: number, game_id: number) => {
  let res = await getOperatorTiger({
    agent_id: id, game_id: game_id
  });
  res.data.isMaintenance = false
  Object.assign(data, res.data)
  getGameInfo(props.checkedItem)
}

// 设置
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data>>({
  game_name: [{ required: true, message: '请输入中文(Chinese)名称', trigger: 'blur' }],
})
const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = await editTiger(data, true);
      ElMessage.success('修改成功')
      emit('onHideDetails', true)
    }
  })
}, 3000)

// 新增押注面额
const addPressure = () => {
  data.pressureList.push({ num: 0.001 })
}
// 减少押注面额
const reducePressure = (index:number) => {
  if (!index && data.pressureList.length == 1) {
    return ElMessage.error('最少保留一个押注面额！')
  }
  data.pressureList.splice(index, 1)
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss">
.amountBox {
  overflow: auto;
  white-space: nowrap;

  /* 定义滚动条宽度和背景颜色 */
  &::-webkit-scrollbar {
    height: 6px;
    /* 定义滚动条宽度 */
  }

  .box-item {
    padding: 5px;
    background-color: #f8f8f8;
    border-radius: 5px;
  }
}
</style>